<template>
  <div class="colony-manage w-full h-full">
    <a-table
      style="height: calc(100% - 10px);overflow-y: auto;"
      :columns="outerColumns"
      :data-source="outerDataSource"
      :pagination="pagination"
      :rowKey="record => record.id"
      :expandIconColumnIndex="-1"
      :expandIconAsCell="false"
      :expandedRowKeys="expandedRowKeys"
      bordered
    >
      <template slot="broker" slot-scope="text,record">
        <a-icon @click="enterDetail(expandedRowKeys[0] !== record.id,record)" class="pointer" title="详情" :type="open ? 'menu-fold' : 'menu-unfold'" />
      </template>

      <a-table
        slot="expandedRowRender"
        :pagination="false"
        :rowKey="record => record.id"
        :columns="innerColumns"
        :data-source="innerDataSource"
        :expandedRowKeys="innerColumns.map(item => item.dataIndex)"
        bordered
      >
      </a-table>
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import orupService from '@/api/orupService'

const outerColumns = [
  {
    title: '集群名称',
    align: 'center',
    dataIndex: 'clusterName'
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createTime',
    customRender: function (text, row, index) {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  {
    title: '详情',
    align: 'center',
    dataIndex: '',
    width: '120px',
    scopedSlots: { customRender: 'broker' }
  }
]

const innerColumns = [
  {
    title: '名称',
    align: 'center',
    dataIndex: 'brokerName'
  },
  {
    title: '编号',
    align: 'center',
    dataIndex: ''
  },
  {
    title: '主节点',
    align: 'center',
    dataIndex: ''
  },
  {
    title: '角色',
    align: 'center',
    dataIndex: 'brokerRole'
  },
  {
    title: '版本号',
    align: 'center',
    dataIndex: 'brokerVersion'
  },
  {
    title: '地址',
    align: 'center',
    dataIndex: 'address'
  },
  {
    title: '端口',
    align: 'center',
    dataIndex: 'listenPort'
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status'
  }
]
export default {
  name: 'ColonyManage',

  data () {
    return {
      open: false,
      expandedRowKeys: [],
      outerColumns,
      outerDataSource: [],
      innerColumns,
      innerDataSource: [],
      filter: {
        filterText: '',
        pageIndex: 1,
        pageSize: 10
      },
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
        showTotal: (total) => `共${total}条数据`,
        onShowSizeChange: (current, pageSize) => {
          this.filter.pageIndex = 1
          this.filter.pageSize = pageSize
        },
        onChange: (current, pageSize) => {
          this.filter.pageIndex = current
          this.filter.pageSize = pageSize
          this.table.pagination.current = current
        }
      }
    }
  },

  mounted () {
    this.loadData()
  },

  methods: {
    moment,
    async loadData () {
      this.outerDataSource = await orupService.colonyClusterListQuery()
    },
    enterDetail (expanded, record) {
      this.open = !this.open
      this.expandedRowKeys = []
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        orupService.colonyBrokerListQuery(record.id).then(res => {
          if (res && res.length > 0) {
            this.innerDataSource = res
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.colony-manage {
  background: #fff;
  padding: 10px;

  /deep/ .ant-table-expanded-row td > .ant-table-wrapper {
    margin: -10px -16px -11px -16px;
  }

  .pointer {
    cursor: pointer;
  }
}

</style>
